/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  CCell, Table, TableBody, TableRow, Text, TableHead, BlobInputList, Cell, Input,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl} from "../../common/base";
import { useOmnipotentPrefTitle} from "../../hook/useOmnipotentPref";
import {useMeasureInpFilter} from "../../common/hooks";

//通用配置
const itemsChk =[
  ['加足润油',[],'在试验前，叉车应加足规定的燃料、润滑油、液压油、冷却液等。',undefined,['样机试验前，加足了规定的润滑油、液压油。'],],
  ['电池足',[],'蓄电池应充足电量，电解液密度、电解液液面高度应符合使用说明书的要求。',undefined,['蓄电池电量充足，电解液密度、液面高度符合使用说明书的要求。'],],
  ['同规格胎',[],<Text css={{fontSize:'0.875rem'}}>叉车轮胎应符合如下规定：<br/>
      a）无载状态下，充气轮胎气压应符合规定数值。充气气压误差为轮胎规定充气气压的±10 %；<br/>
      b）实心轮胎应符合该车技术条件或有关技术条件的规定，前桥及后桥同一个桥上的两个轮胎应采用同型号规格的轮胎。</Text>,undefined,['样机为轮胎，符合该车技术条件，同一桥上两个轮胎的型号规格相同。'],],
  ['预热',[],'叉车在试验前应充分预热。',undefined,['试验前已充分预热。'],],
];
export const itemA验前检: string[] = [ ];
itemsChk.forEach(([name, _, _2], i: number) => {
    itemA验前检.push(name as string);
    if(2===i)  itemA验前检.push(name+ '1',name+ '2',name+ '3',name+ '4');
});
export const PretestCheck =
React.forwardRef((
    {children, show, alone = true, refWidth, label, }: InternalItemProps, ref
) => {
    const itemA = React.useMemo(() => {
        return ['胎定压','胎定压2', ...itemA验前检 ];
    }, []);
  const {inp, setInp} = useItemInputControl({ref});
  const [getInpFilter] = useMeasureInpFilter(null, itemA,);
  const config = itemsChk;
  const titNode=useOmnipotentPrefTitle({config, });
  return (
      <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                           alone={alone} label={label!}>
        <Text variant="h5">{label}：</Text>
        {itemsChk.map(([name,tils,item,_u,dfvs]:any, t: number) => {
          return <React.Fragment key={t}>
            <Text variant="h5" css={{marginTop: '0.6rem'}}>{titNode[t]}</Text>
            {2===t && <>
              充气轮胎规定气压：
              前轮：{inp?.胎定压 ?? '—'} MPa 后轮：{inp?.胎定压2 ?? '—'} MPa
              <div css={{marginTop: '0.5rem'}}>
                <Text variant="h5">实测气压：</Text>
                左前轮：<Input value={(inp?.[name + '1']) || ''} size={4}
                              style={{display: 'inline-flex', width: 'unset'}}
                              onChange={e => setInp({...inp, [name + '1']: e.currentTarget.value || undefined})}/> MPa
                后轮：<Input value={(inp?.[name + '2']) || ''} size={4}
                            style={{display: 'inline-flex', width: 'unset'}}
                            onChange={e => setInp({...inp, [name + '2']: e.currentTarget.value || undefined})}/> MPa
                右前轮：<Input value={(inp?.[name + '3']) || ''} size={4}
                              style={{display: 'inline-flex', width: 'unset'}}
                              onChange={e => setInp({...inp, [name + '3']: e.currentTarget.value || undefined})}/> MPa
                后轮：<Input value={(inp?.[name + '4']) || ''} size={4}
                            style={{display: 'inline-flex', width: 'unset'}}
                            onChange={e => setInp({...inp, [name + '4']: e.currentTarget.value || undefined})}/> MPa
              </div>
              <br/> b）同一个桥上的轮胎
            </>}
            检查结果:
            {3===t ?  dfvs[0]
                :
              <BlobInputList value={inp?.[name] || ''} rows={1} datalist={[dfvs![0]]}
                             onListChange={v => setInp({...inp, [name]: v || undefined})}/>
            }
          </React.Fragment>;
        })}
        {children}
      </InspectRecordLayout>
    );
});
//6、试验前检查
export const PretestCheckVw = ({orc, rep,}: { orc: any, rep: any}
) => {
  return <>
    <div css={{"@media print": {paddingBottom: '4rem', pageBreakInside: 'avoid'}}}>
      <Text variant="h4" css={{marginTop: '1rem'}}>6、试验前检查记录表</Text>
    </div>
    <Table id='PretestCheck' fixed={["%","50%"]}
           css={{borderCollapse: 'collapse', "@media print": {marginTop: '-4rem'}}} tight miniw={800}>
      <TableHead>
          <TableRow><CCell>检 查 项 目</CCell><CCell>检 查 结 果</CCell></TableRow>
      </TableHead>
      <TableBody>
        <RepLink ori rep={rep} tag={'PretestCheck'}>
          {itemsChk.map(([name,_t,item,_u,dfvs]: any, i:number) => {
              return <TableRow key={i}>
                <Cell split={2===i}>{item}</Cell>
                <Cell split={2===i}>
                  {2===i && <div>
                    充气轮胎规定气压：
                    前轮：{orc?.胎定压 ?? '—'} MPa 后轮：{orc?.胎定压2 ?? '—'} MPa<br/>
                    <Text css={{fontSize:'0.875rem'}}>实测气压：</Text>
                    <div css={{display: 'flex'}}>
                      左前轮：{(orc?.[name + '1']) || '—'} MPa
                      后轮：{(orc?.[name + '2']) || '—'} MPa
                      右前轮：{(orc?.[name + '3']) || '—'} MPa
                      后轮：{(orc?.[name + '4']) || '—'} MPa
                    </div>
                     b）同一个桥上的轮胎
                  </div>
                  }
                  {orc?.[name]??dfvs[0]}
                </Cell>
              </TableRow>
          })}
        </RepLink>
      </TableBody>
    </Table>
  </>;
};
